<template>
	<view>
		<view>
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>
		<view>
			<uni-notice-bar showIcon show-close single text="刷新能让您的通告信息位置更靠前!" /></uni-section>
			<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height: height + 'px'}">
				<swiper-item v-for="(itm, idx) in tabs.length" :key="idx">

					<view class="row-center marginTop-50" v-if="NoticeList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								暂无相关通告
							</view>
						</view>
					</view>

					<view class="" v-else>
						<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="onPullUpLoading(idx)">
							<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
								@click="$common.goNavPage('/notice/details?NoticeID='+item.NoticeID)">
								<view class="Notice-State" v-if="item.NoticeState == 0"
									style="background-color: #dddddd;">待审核</view>
								<view class="Notice-State" v-if="item.NoticeState == 1"
									style="background-color: #dddddd;">待开放</view>
								<view class="Notice-State" v-if="item.NoticeState == 2"
									style="background-color: #dddddd;">开放中</view>
								<view class="Notice-State" v-if="item.NoticeState == -2"
									style="background-color: #dddddd;">已重提待审核</view>
								<view class="Notice-State" v-if="item.NoticeState == 3"
									style="background-color: #dddddd;">已结束</view>
								<view class="Notice-State" v-if="item.NoticeState == 5"
									style="background-color: #dddddd;">已结束</view>
								<view class="Notice-State" v-if="item.NoticeState == -1"
									style="background-color: #dddddd;" @click.stop="onAuditFail(item.NoPublicMemo)">审核失败
								</view>
								<view class="Notice-State" v-if="item.NoticeState == 4"
									style="background-color: #dddddd;">已过期</view>

								<view class="flexbc marginTop-20">
									<view class="noticeTitle">
										<text class="one-ellipsis" style="max-width: 70%;">{{ item.ClassName }}</text>
										<text style="margin-left:0rpx">・</text>
										<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1">
											<text>¥</text>
											<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
											<text v-else>{{ item.StartPrice|formatPrice }} ~
												{{ item.EndPrice|formatPrice }}</text>
											<text v-if="item.Unit">{{ JSON.parse(item.Unit).text}}</text>
										</text>
										<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
									</view>
									<view class="disflex ai-center">
										<fui-icon name="location" :size="30"></fui-icon>
										<text class="onCity">{{ item.City?item.City:'全国' }}</text>
									</view>
								</view>
								<view class="flexbc">
									<view class="leftTexts">
										<view class="noticeMemo">{{item.NoticeMemo}}</view>
										<view class="userlabel">
											<view>{{ item.NoticeTarget.LabelName }}</view>
											<view v-if="item.SexLimit">性别要求：{{ JSON.parse(item.SexLimit).text }}</view>
										</view>
										<view class="userInfo">
											<view class="userHeadPic">
												<image :src="item.Publicer.WxHeadPic"></image>
											</view>
											<view class="userNicker">{{item.Publicer.NickName}}</view>
											<image :src="baseUrl + 'icon/authed.png'" class="authed"
												v-if="item.Publicer.isAuthOk == 1"></image>
										</view>
									</view>
									<view class="rightPic" v-if="JSON.parse(item.NoticePics)[0]">
										<image :src="JSON.parse(item.NoticePics)[0]" mode=""></image>
										<!-- 										<zero-lazy-load borderRadius="10" height="160"
											:image="JSON.parse(item.NoticePics)[0]"
											imgMode='aspectFill'></zero-lazy-load> -->
									</view>
								</view>
								<view class="indexBoxBottom flexbc">
									<view class="row-start">
										<view>{{ $common.timeDiff(item.showTime,new Date()) }}</view>
										<view class="marginLeft-20"><text>阅读量</text><text
												class="marginLeft-10">{{ item.ReadCount }}</text></view>
									</view>
									<view><text>已报名</text><text
											style="padding: 0 8rpx;">{{ item.BaomingCount }}</text><text>人</text>
									</view>
								</view>

								<view class="row-between marginTop-20">
									<view class="row-start">
										<button class="button-status" style="height: 60rpx;"
											@click.stop="onEndRegistration(item.NoticeID)"
											v-if="item.NoticeState == 2">结束报名</button>
										<button class="button-status" style="width: 120rpx;height: 60rpx;"
											@click.stop="onDelete(item.NoticeID)"
											v-if="item.NoticeState == 1">删除</button>
									</view>

									<view class="row-end">

										<button class="button-status" style="width: 120rpx;height: 60rpx;"
											:style="{marginRight: item.NoticeState == -1 || item.NoticeState == 3 || item.NoticeState == 4? '20rpx': '0'}"
											@click.stop="onDelete(item.NoticeID)"
											v-if="item.NoticeState == -1 || item.NoticeState == 3 || item.NoticeState == 4 || item.NoticeState == 5">
											删除
										</button>

										<button class="button-status button-status-border"
											style="height: 60rpx;background-color:#FFDD00;"
											v-if="item.NoticeState == -1"
											@click.stop="$common.goNavPage(`/releasePages/pages/noticeOrder?NoticeID=${item.NoticeID}`)">
											重新提交
										</button>

										<button class="button-status"
											style="width: 120rpx;height: 60rpx;background-color: transparent;"
											:style="[{ marginRight:item.NoticeState == 2? '20rpx': '' }]"
											@click.stop="onRefresh(item.NoticeID)" v-if="item.NoticeState == 2">
											刷新
										</button>

										<button class="button-status button-status-border"
											style="height: 60rpx;background-color:#FFDD00;"
											v-if="item.NoticeState == 3&& item.BaomingCount!=0 || item.NoticeState == 5&& item.BaomingCount!=0|| item.NoticeState == 2&& item.BaomingCount!=0 || item.NoticeState == 4 && item.BaomingCount!=0"
											@click.stop=" $common.goNavPage('/myPages/pages/signUpNotice?NoticeID=' + item.NoticeID )">
											管理报名
										</button>

										<button class="button-status button-status-border"
											style="height: 60rpx;background-color:#FFDD00;" v-if="item.NoticeState == 1 
											" @click.stop="onOpenRecruit(item)">
											开放招募
										</button>

									</view>
								</view>
							</view>
							<view class="" style="height: 200rpx;">
								<uni-load-more :status="more"></uni-load-more>
							</view>
						</scroll-view>

					</view>

				</swiper-item>
			</swiper>
		</view>
		<view class="publicBottom flexbc">
			<button class="backBtn" @click="$common.goSwtPage(' /pages/index/index')">返回首页</button>
			<button class="publicBtn" @click="$common.goNavPage('/releasePages/pages/publicNotice')">发布新通告</button>
		</view>

		<fui-dialog :show="auditingFail.show" :title="auditingFail.title" :content="auditingFail.content"
			:buttons="auditingFail.buttons" maskClosable @click="auditingFailConfirm" @close="onClose(3)"></fui-dialog>
	</view>
</template>

<script>
	export default {
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				tabs: [

					// {index: 0,id: -1, name: '全部'},
					// {index: 1,id: 1, name: '待开放'},
					// {index: 2,id: 5, name: '开放中'},
					// {index: 3,id: 3, name: '已结束'},
					// {index: 4,id: 2, name: '审核失败'},
					// {index: 5,id: 4, name: '已过期'},

					{
						index: 0,
						id: 10000,
						name: '全部'
					},
					{
						index: 1,
						id: 1,
						name: '待开放'
					},
					{
						index: 2,
						id: 2,
						name: '开放中'
					},
					{
						index: 3,
						id: 3,
						name: '已结束'
					},
					{
						index: 4,
						id: -1,
						name: '审核失败'
					},
					{
						index: 5,
						id: 4,
						name: '已过期'
					},
				],
				NoticeList: [],
				ListType: 10000,
				tabIndex: 0,
				height: 0,
				more: '',
				page: 1,
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
		},
		onShow() {
			this.NoticeList = [];
			this.page = 1;
			this.loadDataOne();
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(300);
		},
		methods: {
			// 点击开放按钮
			onOpenRecruit(item) {
				// 如果是通告类型 当前通告有支付套餐，需要支付开放
				if (item.NoticeState == 1 && item.PayPlanID != 0) {
					this.$common.goNavPage(
						`/notice/openRecruitment?NoticeID=${item.NoticeID}&PayPlanID=${item.PayPlanID}`);
				}
			},
			// 上拉加载
			onPullUpLoading() {
				this.page += 1;
				this.loadData();
			},
			tabChange(event) {
				this.NoticeList = [];
				this.page = 1;
				this.tabIndex = event.detail.current;
			},
			// 审核失败弹框
			onAuditFail(auditInfo) {
				uni.showModal({
					title: '',
					content: `原因：${auditInfo? auditInfo: '无'}`,
					showCancel: false,
				})
			},

			// 删除
			onDelete(NoticeID) {

				uni.showModal({
					title: '确定要删除吗？',
					confirmText: '确定删除',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.$httpost('/Notices/DeleteNotice', {
								NoticeID
							}).then(res => {

								// console.log('res' , res)
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									this.loadDataOne()
								}
							})

						}
					}
				})

			},
			getMyWallet() {
				return new Promise((reslove, reject) => {
					this.$httpost('/UserCenter/myWallet', {}).then(res => {
						// console.log('mywallet', res);
						if (res.code == 200) {
							reslove(res.data.WalletYue)
						}
					});
				})
			},

			// 刷新
			async onRefresh(NoticeID) {
				const myWallet = await this.getMyWallet();
				// console.log('myWallet', myWallet);

				if (Number(myWallet) < 5) {
					uni.showModal({
						title: '您当前余额不足！',
						confirmText: '去充值',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.$common.goNavPage('/myPages/pages/reCharge')
							}
						}
					})
					return false;
				}

				uni.showModal({
					// title: '刷新将会上升您的排名，此次刷新会消耗5个金币',
					title: '刷新能让您的通告信息位置更靠前, 此次刷新会消耗5个金币',
					confirmText: '确定刷新',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.$httpost('/Notices/RefreshNotice', {
								NoticeID
							}).then(res => {
								// console.log('res' , res)
								if (res.code == 200) {
									uni.showToast({
										title: '刷新成功',
										icon: 'success'
									})
									this.loadDataOne()
								}
							})

						}
					}
				})
			},
			// 结束报名
			onEndRegistration(NoticeID) {
				uni.showModal({
					title: '确定要结束报名吗？',
					confirmText: '确定结束',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.$httpost('/Notices/EndNotice', {
								NoticeID
							}).then(res => {
								// console.log('res' , res)
								if (res.code == 200) {
									uni.showToast({
										title: '已结束报名',
										icon: 'success'
									})
									this.loadDataOne()
								}
							})

						}
					}
				})
			},

			auditingFailConfirm(event) {
				if (event.index == 0) return this.auditingFail.show = false;
				this.auditingFail.show = false
			},
			loadData() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: this.page
				}).then(res => {
					// console.log('接口返回数据UserCenter/myTonggao', res);
					if (res.code == 200) {
						if (this.NoticeList.length != 0) {
							this.NoticeList = [...this.NoticeList, ...res.data.NoticeList];
							if (res.data.NoticeList.length == 0) this.more = '';
						} else {
							this.NoticeList = res.data.NoticeList;
							this.more = '';
						}
						// console.log(this.NoticeList)
					}

				});
			},
			loadDataOne() {

				this.more = 'loading';
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: 1
				}).then(res => {
					// console.log('接口返回数据UserCenter/myTonggao', res);
					if (res.code == 200) {
						this.NoticeList = res.data.NoticeList;
						this.more = '';
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					}
				});
			},
			changeTabs(e) {
				uni.showLoading({
					title: '加载中'
				})
				this.NoticeList = [];
				this.page = 1;
				this.tabIndex = e.index;
				this.ListType = e.id;
				this.loadDataOne();

			}
		}
	}
</script>

<style lang="scss">
	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.List {
		background: #FFF;
		padding: 20rpx;
		border-bottom: 1px solid #CCC
	}

	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		// border-radius:20rpx;
		padding: 30rpx;
		// margin-left:20rpx;
		// margin-right:20rpx;
		position: relative;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.leftTexts {
		padding-right: 10rpx;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.userInfo {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.userHeadPic {
		width: 45rpx;
		height: 45rpx;
		background-color: #00cbff;
		border-radius: 50rpx;
	}

	.userHeadPic image {
		width: 45rpx;
		height: 45rpx;
		border-radius: 50rpx;
	}

	.userNicker {
		margin-left: 10rpx;
	}

	.rightPic {
		width: 160rpx;
		height: 160rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/e2f264f714b5e59a899535cb423bd1bd8498ef1e1184cb-eowWX4_fw658');
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.rightPic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.indexBoxBottom {
		// clear:both;
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.indexBoxCount {
		width: 220rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.readcount {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.mailicon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx
	}

	.showicon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.publicBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 115rpx;
		background-color: #FFF;
		padding-top: 20rpx;
	}

	.backBtn {
		flex: 1;
		height: 70rpx;
		background-color: #f0f0f0;
		color: #000;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-left: 20rpx;
	}

	.publicBtn {
		flex: 1;
		height: 70rpx;
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.button-status {
		color: #333;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 0;
		font-size: 24rpx;
		background-color: transparent;
	}

	.button-status::after {
		border-style: #000 !important;
	}

	.Notice-State {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}

	.button-status-border::after {
		border: none;
	}
</style>